<template>
  <div>
    <!-- <h4>约课记录页面</h4> -->
    <van-tabs v-model="active">
      <van-tab title="待上课">
        <div class="container" v-if="list.length!==0">
          <img src="../../../assets/loading.png" alt />
          <p>还没待上课记录哦</p>
          <button class="btn" @click="goYueke">立即约课</button>
        </div>
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        />
      </van-tab>
      <van-tab title="已上课">
        <div class="container">
          <img src="../../../assets/loading.png" alt />
          <p>还没已上课记录哦</p>
          <button class="btn" @click="goYueke">立即约课</button>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div class="container">
          <img src="../../../assets/loading.png" alt />
          <p>还没有已取消记录哦</p>
        </div>
      </van-tab>
    </van-tabs>
    <div class="jddw" v-show="isShow">
      <img src="../../../assets/loading.png" alt />
      <p>登陆后查看相关内容</p>
      <button class="btn" @click="goLogin">登录/注册</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      list: [],
      isShow: true,
      active: 0
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goLogin() {
      this.$router.push("./login");
    },
    goYueke() {
      this.$router.push("./oto");
    }
  }
};
</script>
<style lang="scss" scoped>
.jddw {
  width: 100%;
  height: 85vh;
  background: #f0f2f5;
  position: fixed;
  top: 1.23333rem;
  text-align:center;
  z-index:999
}
.jddw img {
  margin:0 auto;
  width: 55%;
  margin-top: 42%;
}
.jddw .btn {
  width: 23.46667vw;
  height: 0.74667rem;
  height: 7.46667vw;
  font-size: 0.34667rem;
  font-size: 3.46667vw;
  color: #fff;
  background: #eb6100;
  border-radius: 0.06667rem;
  border-radius: 0.66667vw;
}
.jddw p {
  font-size: 3.46667vw;
}
.container {
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 86vh;
  background: #f0f2f5;
  text-align: center;
  font-size: 3.46667vw;
  img {
    margin-top: 35%;
    width: 50%;
  }
}
.container .btn {
  width: 76px;
  height: 27px;
  border: none;
  background: #eb6100;
  color: white;
}
.container>.btn:hover {
  box-shadow: 10px, 1, 10px, #eb6100;
}
</style>